<template>
  <div>
    <div ref="header" class="header">
      <van-icon @click="goback" size="18px" name="arrow-left" />
      <div class="title">修改房源</div>
      <div></div>
    </div>
    <div class="cutpart"></div>
    <div class="houseinfo">
      <van-cell title="城市" size="large" is-link @click="show1 = true">{{
        value1
      }}</van-cell>
      <van-cell title="楼层" size="large" is-link @click="show2 = true">
        {{ value2 }}
      </van-cell>
      <van-cell title="户型" size="large" is-link @click="show3 = true">
        {{ value3 }}
      </van-cell>
      <van-cell title="电梯" size="large" is-link @click="show4 = true">
        {{ value4 }}
      </van-cell>
      <van-cell class="pcell" title="面积" size="large">
        <input
          type="number"
          v-model="sendval.coveredArea"
          placeholder="请填写"
        />
      </van-cell>
      <van-cell class="pcell" title="小区" size="large">
        <input type="text" v-model="sendval.subdistrict" placeholder="请填写" />
      </van-cell>
      <van-cell size="large" @click="showmore = true">
        <template #title>
          <span>详情</span>
        </template>
        <div>更多描述</div>
        <template #right-icon>
          <van-icon
            name="add-o"
            style="font-size: 16px; line-height: inherit"
          />
        </template>
      </van-cell>
    </div>
    <div class="morecontent">
      <div class="tipsword">
        更详尽房源信息 估价更精确
        <span>(选填)</span>
      </div>
      <div class="houseinfo">
        <van-cell class="pcell" title="建筑面积(平方米)" size="large">
          <input type="text" placeholder="请填写" />
        </van-cell>
        <van-cell class="pcell" title="装修费用(元)" size="large">
          <input
            type="number"
            v-model="sendval.decorateCost"
            placeholder="请填写"
          />
        </van-cell>
        <van-cell
          class="pcell"
          @click="showdate = true"
          title="装修完成时间"
          size="large"
        >
          {{ valuedate }}
        </van-cell>
      </div>
    </div>
    <div class="tipsword">
      不动产证照片
      <span>(或其他权属证明)</span>
    </div>
    <div class="picup">
      <van-uploader
        accept="image/*"
        :max-count="1"
        v-model="fileList1"
        :after-read="afterRead1"
      />
    </div>
    <div class="tipsword">
      身份证照片
      <span>(仅用于确认权属信息)</span>
    </div>
    <div class="picup" v-show="!pass">
      <van-uploader
        accept="image/*"
        :max-count="1"
        v-model="fileList2"
        :after-read="afterRead2"
      />
    </div>
    <div v-show="pass" class="passreal">实名认证已通过</div>
    <div class="tipsword">房屋照片</div>
    <div class="picup">
      <van-uploader
        accept="image/*"
        :max-count="15"
        v-model="fileList4"
        :after-read="afterRead4"
        @delete="deleteimg"
      />
    </div>
    <div class="tipsword">房源验核资料</div>
    <div class="houseinfo">
      <van-cell title="验核码" size="large">
        <input
          type="number"
          v-model="sendval.auditedCode"
          placeholder="请输入验核码"
        />
        <template #right-icon>
          <van-icon @click="showask = true" class="ask" name="question-o" />
        </template>
      </van-cell>
      <div class="cell">
        <div class="lbox">出售价格</div>
        <div class="rbox">
          <input
            type="number"
            v-model="sendval.listedPrice"
            placeholder="请输入"
          />
          <span>万</span>
        </div>
      </div>
      <van-cell class="pcell" title="联系人信息" size="large">
        <div>{{ sendval.contactName }}</div>
      </van-cell>
      <van-cell
        class="pcell"
        title="请输入电话"
        label="将会以隐私号码形式展示"
        size="large"
      >
        <div>{{ sendval.contactMobile }}</div>
      </van-cell>
      <van-cell
        @click="showtime1 = true"
        title="可看房时间"
        size="large"
        label="与买家直接联系"
        is-link
        >{{ value5 }}</van-cell
      >
    </div>
    <div class="image"></div>
    <div class="showline">
      <div class>
        <img src="../../assets/buysell02.png" />
        <span>在线沟通</span>
      </div>
      <div class>
        <img src="../../assets/buysell03.png" />
        <span>快速匹配</span>
      </div>
      <div class>
        <img src="../../assets/buysell04.png" />
        <span>业主0费用</span>
      </div>
      <div class>
        <img src="../../assets/buysell05.png" />
        <span>全员服务</span>
      </div>
    </div>
    <div class="tipsword2">房源发布流程</div>
    <div class="line">
      <div class="one">
        <img src="../../assets/buysell06.png" />
        <div class>填写信息</div>
      </div>
      <div class="two">
        <img src="../../assets/buysell09.png" />
      </div>
      <div class="one">
        <img src="../../assets/buysell07.png" />
        <div class>上传验核</div>
      </div>
      <div class="two">
        <img src="../../assets/buysell09.png" />
      </div>
      <div class="one">
        <img src="../../assets/buysell08.png" />
        <div class>挂牌展示</div>
      </div>
    </div>
    <div class="btnpart">
      <div class="cheak">
        <van-checkbox
          shape="square"
          icon-size="12px"
          checked-color="#45b7cb"
          v-model="checked"
        ></van-checkbox>
        <span>
          我已阅读并同意
          <span @click="toownerupagreement" class="xy"
            >《业主挂牌房源协议》</span
          >
        </span>
      </div>
      <button @click="jump">提交验核</button>
      <div class="safe"></div>
    </div>
    <van-popup v-model="showmore" closeable round>
      <div class="moretip">
        <div class="tipwords">房屋类型</div>
        <div class="tipcard">
          <span
            v-for="(item, index) in houseTypelist"
            ref="houseType"
            :key="item"
            @click="housetypechoose($event, item)"
            :class="index + 1 == sendval.houseGenre ? 'active' : ''"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">朝向类型</div>
        <div class="tipcard">
          <span
            v-for="(item, index) in houseDirectionlist"
            ref="direction"
            :key="item"
            @click="housedirectionchoose($event, item)"
            :class="index + 1 == sendval.aspectType ? 'active' : ''"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">装修情况</div>
        <div class="tipcard">
          <span
            v-for="(item, index) in renovationlist"
            ref="renovation"
            :key="item"
            @click="renovationchoose($event, item)"
            :class="index + 1 == sendval.decoration ? 'active' : ''"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">房产证情况</div>
        <div class="tipcard">
          <span
            v-for="(item, index) in certificatelist"
            ref="certificate"
            :key="item"
            @click="certificatechoose($event, item)"
            :class="index + 1 == sendval.propertyCert ? 'active' : ''"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">欠款情况</div>
        <div class="tipcard">
          <span
            v-for="(item, index) in owelist"
            ref="owe"
            :key="item"
            @click="owechoose($event, item)"
            :class="index + 1 == sendval.unpaidSituation ? 'active' : ''"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">业主心态</div>
        <div class="tipcard">
          <span
            v-for="(item, index) in mentalitylist"
            ref="mentality"
            :key="item"
            @click="mentalitychoose($event, item)"
            :class="index + 1 == sendval.ownerMentality ? 'active' : ''"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">业主态度</div>
        <div class="tipcard">
          <span
            v-for="(item, index) in attitudelist"
            ref="attitude"
            :key="item"
            @click="attitudechoose($event, item)"
            :class="index + 1 == sendval.ownerAttitude ? 'active' : ''"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">带看情况</div>
        <div class="tipcard">
          <span
            v-for="(item, index) in looklist"
            ref="look"
            :key="item"
            @click="lookchoose($event, item)"
            :class="index + 1 == sendval.lookSituation ? 'active' : ''"
            >{{ item }}</span
          >
        </div>
        <div class="tipwords">是否接受贷款</div>
        <div class="tipcard">
          <span
            v-for="(item, index) in loanlist"
            ref="loan"
            :key="item"
            @click="loanchoose($event, item)"
            :class="index + 1 == sendval.acceptLoan ? 'active' : ''"
            >{{ item }}</span
          >
        </div>
        <div class="btn">
          <button @click="clear2">重置</button>
          <button @click="confirmtip">确认</button>
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="show1"
      :style="{ height: '40%' }"
      position="bottom"
      @close="onclose1"
    >
      <van-tree-select
        :items="items"
        :active-id.sync="activeId"
        :main-active-index.sync="activeIndex"
        @click-nav="getAdcode"
        @click-item="getCity"
      />
    </van-popup>
    <van-popup
      v-model="show2"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclose2"
    >
      <van-picker
        show-toolbar
        title="楼层"
        :columns="columns2"
        @confirm="onConfirm2"
        @cancel="onCancel2"
        visible-item-count="4"
      />
    </van-popup>
    <van-popup
      v-model="show3"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclose3"
    >
      <van-picker
        show-toolbar
        title="户型"
        :columns="columns3"
        @confirm="onConfirm3"
        @cancel="onCancel3"
        visible-item-count="4"
      />
    </van-popup>
    <van-popup
      v-model="show4"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclose4"
    >
      <van-picker
        show-toolbar
        title="电梯"
        :columns="columns4"
        @confirm="onConfirm4"
        @cancel="onCancel4"
        visible-item-count="4"
      />
    </van-popup>
    <van-popup v-model="show" @close="onclose">
      <div class="showpart">
        <div>恭喜上传成功</div>
        <div>
          预计验核时间30分钟，请耐心等待，可以在个人中心-房源管理中查看进度及修改
        </div>
        <div>
          <div class="sline"></div>
          <div class>感谢信赖托付</div>
          <div class="sline"></div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="showask" @close="oncloseask">
      <div class="showpart2">
        <div>*验核码仅供查询核验结果使用</div>
        <div>*本地住建局官网可验核或咨询经纪人</div>
        <div>
          <div class="sline"></div>
          <div class>感谢信赖托付</div>
          <div class="sline"></div>
        </div>
      </div>
    </van-popup>
    <van-popup
      position="bottom"
      :style="{ height: '40%' }"
      v-model="showtime1"
      @close="onclosetime1"
    >
      <van-datetime-picker
        v-model="seeApartmentTimeMin"
        @cancel="onclosetime1"
        @confirm="choosetime1"
        type="time"
        title="选择起始时间"
        :min-hour="7"
        :max-hour="23"
        visible-item-count="4"
      />
    </van-popup>
    <van-popup
      position="bottom"
      :style="{ height: '40%' }"
      v-model="showtime2"
      @close="onclosetime2"
    >
      <van-datetime-picker
        v-model="seeApartmentTimeMax"
        @cancel="onclosetime2"
        @confirm="choosetime2"
        type="time"
        title="选择结束时间"
        :min-hour="TimeMin"
        :max-hour="23"
        visible-item-count="4"
      />
    </van-popup>
    <van-calendar
      color="#45b7cb"
      :min-date="minDate"
      :max-date="maxDate"
      v-model="showdate"
      @confirm="onConfirmdate"
    />
  </div>
</template>

<script>
import local from "../../utils/local";
const qiniu = require("qiniu-js");
import { dataURLtoFile, uuid } from "../../utils/help.js";
import { getToken, getVideoToken, ownerUphouse } from "../../apis/house";
import { idcardUp } from "../../apis/user.js";
import { _local } from "@/utils/storage.js";
import { getAreaList } from "@/apis/city";
import { getSecondHouseEdit, modifySecondHouse } from "@/apis/house";

export default {
  data() {
    return {
      showmore: false,
      houseTypelist: ["刚需小户", "大平层", "别墅", "公寓"],
      houseDirectionlist: [
        "东南",
        "南",
        "西南",
        "西",
        "西北",
        "北",
        "东北",
        "东",
        "南北通透",
        "东西通透",
      ],
      renovationlist: ["精装修", "毛坯", "简装"],
      certificatelist: ["不满2年", "满2年", "满5年"],
      owelist: ["有贷款", "红本在手"],
      mentalitylist: ["急售", "佛系随缘", "平稳"],
      attitudelist: ["挺好说话", "一般", "不好说话"],
      looklist: ["钥匙在手", "业主自住", "租客在住", "房屋空置"],
      loanlist: ["是", "否"],
      arr: [],
      pass: false,
      items: [
        {
          text: "区域",
          children: [],
          disabled: true,
        },
      ],
      activeId: 0,
      activeIndex: 0,
      token: "",
      videotoken: "",
      sendval: {
        houseId: "",
        houseAcre: "",
        subdistrict: "",
        auditedCode: "",
        listedPrice: "",
        contactName: "",
        contactMobile: "",
        coveredArea: "",
        decorateCost: "",
        decorateFinishTime: "",
        seeApartmentTimeMin: "",
        seeApartmentTimeMax: "",
        sourceAdCode: "",
        houseProperty: "",
        houseImages: "",
        floor: "",
        hasElevator: "",
      },
      show: false,
      showask: false,
      showtime1: false,
      showtime2: false,
      showdate: false,
      TimeMin: 0,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      value1: "请选择",
      value2: "请选择",
      value3: "请选择",
      value4: "请选择",
      value5: "请选择",
      valuedate: "请选择",
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(),
      columns1: [],
      columns2: ["低层1-7层", "中层8-16层", "高层17层及以上"],
      columns3: [
        "1室1厅1卫",
        "1室2厅1卫",
        "2室1厅1卫",
        "2室2厅1卫",
        "3室1厅1卫",
        "3室1厅2卫",
        "3室2厅1卫",
        "3室2厅2卫",
        "4室1厅1卫",
        "4室1厅2卫",
        "4室2厅1卫",
        "4室2厅2卫",
      ],
      columns4: ["有电梯", "无电梯"],
      choosetip: [],
      checked: false,
      checked2: false,
      num1: 1,
      num2: 0,
      num3: 0,
      num4: 0,
      num5: 0,
      timer: "",
      fileList1: [],
      fileList2: [],
      fileList4: [],
      upImg: [],
      surroundImg: [],
      citylist: [],
      flag: false,
      cansetInfo: true,
      idcardUrl: "",
      seeApartmentTimeMin: "",
      seeApartmentTimeMax: "",
    };
  },
  created() {
    if (_local.get("user").result.realNameAuthStatus == 1) {
      this.pass = true;
      this.flag = true;
    }
    this.getHouseInfo();
    this.getCityList();
    this.getqntoken();
    this.getqnVideotoken();
    // if (local.get("setOwnerhouse")) {
    //   this.getsetInfo();
    // }
    this.timer = setInterval(() => {
      let a = Math.floor(Math.random() * 10);
      if (a === 0) {
        this.num1 = 1;
      } else {
        this.num1 = a;
      }
      this.num2 = Math.floor(Math.random() * 10);
      this.num3 = Math.floor(Math.random() * 10);
      this.num4 = Math.floor(Math.random() * 10);
      this.num5 = Math.floor(Math.random() * 10);
    }, 300);
  },
  beforeDestroy() {
    if (this.cansetInfo) {
      let obj = {
        sendval: {},
        upImg: [],
        idcardUrl: "",
        seeApartmentTimeMin: "",
        seeApartmentTimeMax: "",
      };
      obj.sendval = this.sendval;
      obj.idcardUrl = this.idcardUrl;
      obj.upImg = this.upImg;
      obj.seeApartmentTimeMin = this.seeApartmentTimeMin;
      obj.seeApartmentTimeMax = this.seeApartmentTimeMax;
      local.set("setOwnerhouse", JSON.stringify(obj));
    } else {
      local.del("setOwnerhouse");
    }
    clearInterval(this.timer);
  },
  methods: {
    clear2() {
      this.sendval.houseGenre = "";
      this.sendval.aspectType = "";
      this.sendval.decoration = "";
      this.sendval.propertyCert = "";
      this.sendval.unpaidSituation = "";
      this.sendval.ownerMentality = "";
      this.sendval.ownerAttitude = "";
      this.sendval.lookSituation = "";
      this.sendval.acceptLoan = "";
      this.$refs.houseType.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.direction.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.renovation.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.certificate.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.owe.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.mentality.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.attitude.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.look.forEach((e) => {
        e.classList.remove("active");
      });
      this.$refs.loan.forEach((e) => {
        e.classList.remove("active");
      });
    },
    confirmtip() {
      this.showmore = false;
    },
    loanchoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.acceptLoan = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.loan.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "是") {
          this.sendval.acceptLoan = "1";
        } else if (item == "否") {
          this.sendval.acceptLoan = "2";
        }
      }
    },
    lookchoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.lookSituation = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.look.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "钥匙在手") {
          this.sendval.lookSituation = "1";
        } else if (item == "业主自住") {
          this.sendval.lookSituation = "2";
        } else if (item == "租客在住") {
          this.sendval.lookSituation = "3";
        } else if (item == "房屋空置") {
          this.sendval.lookSituation = "4";
        }
      }
    },
    attitudechoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.ownerAttitude = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.attitude.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "挺好说话") {
          this.sendval.ownerAttitude = "1";
        } else if (item == "一般") {
          this.sendval.ownerAttitude = "2";
        } else if (item == "不好说话") {
          this.sendval.ownerAttitude = "3";
        }
      }
    },
    mentalitychoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.ownerMentality = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.mentality.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "急售") {
          this.sendval.ownerMentality = "1";
        } else if (item == "佛系随缘") {
          this.sendval.ownerMentality = "2";
        } else if (item == "平稳") {
          this.sendval.ownerMentality = "3";
        }
      }
    },
    owechoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.unpaidSituation = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.owe.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "有贷款") {
          this.sendval.unpaidSituation = "1";
        } else if (item == "红本在手") {
          this.sendval.unpaidSituation = "2";
        }
      }
    },
    certificatechoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.propertyCert = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.certificate.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "不满2年") {
          this.sendval.propertyCert = "1";
        } else if (item == "满2年") {
          this.sendval.propertyCert = "2";
        } else if (item == "满5年") {
          this.sendval.propertyCert = "3";
        }
      }
    },
    renovationchoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.decoration = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.renovation.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "精装修") {
          this.sendval.decoration = "1";
        } else if (item == "毛坯") {
          this.sendval.decoration = "2";
        } else if (item == "简装") {
          this.sendval.decoration = "3";
        }
      }
    },
    housedirectionchoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.aspectType = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.direction.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "东南") {
          this.sendval.aspectType = "1";
        } else if (item == "南") {
          this.sendval.aspectType = "2";
        } else if (item == "西南") {
          this.sendval.aspectType = "3";
        } else if (item == "西") {
          this.sendval.aspectType = "4";
        } else if (item == "西北") {
          this.sendval.aspectType = "5";
        } else if (item == "北") {
          this.sendval.aspectType = "6";
        } else if (item == "东北") {
          this.sendval.aspectType = "7";
        } else if (item == "东") {
          this.sendval.aspectType = "8";
        } else if (item == "南北通透") {
          this.sendval.aspectType = "9";
        } else if (item == "东西通透") {
          this.sendval.aspectType = "10";
        }
      }
    },
    housetypechoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        this.sendval.houseGenre = "";
        event.currentTarget.classList.remove("active");
      } else {
        this.$refs.houseType.forEach((e) => {
          e.classList.remove("active");
        });
        event.currentTarget.classList.add("active");
        if (item == "刚需小户") {
          this.sendval.houseGenre = "1";
        } else if (item == "大平层") {
          this.sendval.houseGenre = "2";
        } else if (item == "别墅") {
          this.sendval.houseGenre = "3";
        } else if (item == "公寓") {
          this.sendval.houseGenre = "4";
        }
      }
    },
    getHouseInfo() {
      getSecondHouseEdit({ houseId: this.$route.query.houseId }).then((res) => {
        console.log("getSecondHouseEdit", res);
        this.value1 = res.result.city;
        this.value2 =
          res.result.floor == 1
            ? "低层1-7层"
            : res.result.floor == 2
            ? "中层8-16层"
            : "高层17层及以上";
        this.sendval.floor = res.result.floor;
        this.sendval.houseGenre = res.result.houseGenre;
        this.sendval.aspectType = res.result.aspectType;
        this.sendval.decoration = res.result.decoration;
        this.sendval.propertyCert = res.result.propertyCert;
        this.sendval.unpaidSituation = res.result.unpaidSituation;
        this.sendval.ownerMentality = res.result.ownerMentality;
        this.sendval.ownerAttitude = res.result.ownerAttitude;
        this.sendval.lookSituation = res.result.lookSituation;
        this.sendval.acceptLoan = res.result.acceptLoan;
        if (res.result.houseType) {
          if (res.result.houseType == "1") {
            this.value3 = "1室1厅1卫";
          } else if (res.result.houseType == "2") {
            this.value3 = "1室2厅1卫";
          } else if (res.result.houseType == "3") {
            this.value3 = "2室1厅1卫";
          } else if (res.result.houseType == "4") {
            this.value3 = "2室2厅1卫";
          } else if (res.result.houseType == "5") {
            this.value3 = "3室1厅1卫";
          } else if (res.result.houseType == "6") {
            this.value3 = "3室1厅2卫";
          } else if (res.result.houseType == "7") {
            this.value3 = "3室2厅1卫";
          } else if (res.result.houseType == "8") {
            this.value3 = "3室2厅2卫";
          } else if (res.result.houseType == "9") {
            this.value3 = "4室1厅1卫";
          } else if (res.result.houseType == "10") {
            this.value3 = "4室1厅2卫";
          } else if (res.result.houseType == "11") {
            this.value3 = "4室2厅1卫";
          } else if (res.result.houseType == "12") {
            this.value3 = "4室2厅2卫";
          }
        }
        if (res.result.hasElevator) {
          if (res.result.hasElevator == "1") {
            this.value4 = "有电梯";
          } else if (res.result.hasElevator == "2") {
            this.value4 = "无电梯";
          }
        }
        this.sendval.hasElevator = res.result.hasElevator;
        this.sendval.coveredArea = res.result.coveredArea;
        this.sendval.subdistrict = res.result.subdistrict;
        if (res.result.houseProperty) {
          let obj = { url: "", isImage: true };
          obj.url = res.result.houseProperty;
          this.fileList1.push(obj);
          this.sendval.houseProperty = obj.url;
        }
        if (res.result.houseImages.length != 0) {
          res.result.houseImages.forEach((e) => {
            let obj = { url: "", isImage: true };
            obj.url = e;
            this.fileList4.push(obj);
            this.arr.push(e);
            this.sendval.houseImages = this.arr.join(",");
          });
        }
        this.sendval.listedPrice = res.result.listedPrice;
        this.sendval.contactName = res.result.contactName;
        this.sendval.contactMobile = res.result.contactMobile;
        this.sendval.sourceAdCode = res.result.sourceAdCode;
        this.sendval.houseId = this.$route.query.houseId;
        this.sendval.auditedCode = res.result.auditedCode;
      });
    },
    getCity(data) {
      this.sendval.sourceAdCode = data.adcode;
      this.sendval.citycode = data.citycode;
      this.sendval.houseAcre = data.text;
      this.value1 = data.text;
      this.show1 = false;
      if (this.value2 == "请选择") {
        this.show2 = true;
      }
      // console.log(data)
    },
    getAdcode(index) {
      this.items[index].children = [];
      getAreaList({
        adcode: this.items[index].adcode,
      }).then((res) => {
        console.log(res);
        res.result.list.forEach((e, i) => {
          var obj = {};
          obj.text = e.name;
          obj.citycode = e.citycode;
          obj.adcode = e.adcode;
          obj.id = i;
          this.items[index].children.push(obj);
        });
      });
    },
    getCityList() {
      getAreaList().then((res) => {
        // console.log(res);
        res.result.list.forEach((e, i) => {
          // console.log(e)
          var obj = {};
          obj.text = e.name;
          obj.adcode = e.adcode;
          obj.children = [];
          this.items.push(obj);
        });
      });
    },
    goback() {
      this.$router.go(-1);
    },
    async getqntoken() {
      await getToken().then((res) => {
        local.set("qntoken", res.result.token);
        this.token = local.get("qntoken");
      });
    },
    async getqnVideotoken() {
      await getVideoToken().then((res) => {
        local.set("qnVideotoken", res.result.token);
        this.videotoken = local.get("qnVideotoken");
      });
    },
    toownerupagreement() {
      this.$router.push({ path: "/ownerupagreement" });
    },
    afterRead1(file) {
      let _this = this;
      let fileurl = file.content;
      let name = file.file.name;
      let imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          _this.sendval.houseProperty = res.key;
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    afterRead2(file) {
      let _this = this;
      let fileurl = file.content;
      let name = file.file.name;
      let imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          _this.idcardUrl = res.key;
          idcardUp({ idCardImage: res.key }).then((rep) => {
            if (2000 < rep.code && rep.code < 3000) {
              _this.$toast(rep.msg);
            } else if (rep.code == 200) {
              _this.flag = true;
            }
          });
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "idcard/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    afterRead4(file) {
      const _this = this;
      let fileurl = file.content;
      let name = file.file.name;
      let imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          file.key = res.key;
          _this.arr.push(res.key);
          _this.sendval.houseImages = _this.arr.join(",");
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    deleteimg(file) {
      let i = this.arr.indexOf(file.key);
      this.arr.splice(i, 1);
      this.sendval.houseImages = this.arr.join(",");
    },
    jump() {
      if (!this.checked) {
        this.$toast("请勾选下方协议");
      } else if (this.value1 == "请选择") {
        this.$toast("请选择城市");
      } else if (this.value2 == "请选择") {
        this.$toast("请选择楼层");
      } else if (this.value3 == "请选择") {
        this.$toast("请选择户型");
      } else if (this.value4 == "请选择") {
        this.$toast("请选择有无电梯");
      } else if (!this.sendval.coveredArea) {
        this.$toast("请填写面积");
      } else if (!this.sendval.subdistrict) {
        this.$toast("请填写小区");
      } else if (this.fileList1.length == 0) {
        this.$toast("请上传不动产证照片");
      } else if (!this.flag) {
        this.$toast("身份证未上传或验证失败");
      } else if (this.fileList4.length == 0) {
        this.$toast("请上传房屋照片");
      } else if (!this.sendval.listedPrice) {
        this.$toast("请填写出售价格");
      }

      if (this.checked) {
        modifySecondHouse(this.sendval).then((res) => {
          console.log("this.sendval", this.sendval);
          console.log("modifySecondHouse", res);
          if (res.code == 201 || res.code == 200) {
            this.$dialog
              .alert({
                title: "温馨提示",
                message: "修改房源信息成功，请等待审核完成",
                confirmButtonColor: "#45b7cb",
                theme: "round-button",
                messageAlign: "left",
              })
              .then(() => {
                this.$router.go(-1);
              });
          }
        });
        // this.sendval.houseImages = this.upImg.join(",");
        // let a = this.seeApartmentTimeMin.split(":");
        // let b = this.seeApartmentTimeMax.split(":");
        // this.sendval.seeApartmentTimeMin =
        //   Number(a[0]) * 3600 + Number(a[1]) * 60;
        // this.sendval.seeApartmentTimeMax =
        //   Number(b[0]) * 3600 + Number(b[1]) * 60;
        // ownerUphouse(this.sendval).then((res) => {
        //   console.log("ownerUphouse", res);
        //   console.log(this.sendval)
        //   if (res.code == 200 || res.code == 201) {
        //     this.show = true;
        //     this.cansetInfo = false;
        //     this.sendval = {
        //       houseAcre: "",
        //       subdistrict: "",
        //       auditedCode: "",
        //       listedPrice: "",
        //       contactName: "",
        //       contactMobile: "",
        //       coveredArea: "",
        //       decorateCost: "",
        //       decorateFinishTime: "",
        //       seeApartmentTimeMin: "",
        //       seeApartmentTimeMax: "",
        //       sourceAdCode: "",
        //     };
        //     this.upImg = [];
        //     this.value1 = "请选择";
        //     this.value2 = "请选择";
        //     this.value3 = "请选择";
        //     this.value4 = "请选择";
        //     this.value5 = "请选择";
        //     this.valuedate = "请选择";
        //     this.seeApartmentTimeMin = "";
        //     this.seeApartmentTimeMax = "";
        //   }
        // });
      }
    },
    onclose() {
      this.show = false;
      this.$router.push("/home/me");
    },
    oncloseask() {
      this.showask = false;
    },
    onclosetime1() {
      this.showtime1 = false;
    },
    choosetime1() {
      this.showtime1 = false;
      this.showtime2 = true;
      this.TimeMin = this.seeApartmentTimeMin.substr(0, 2);
    },
    onclosetime2() {
      this.value5 = `${this.seeApartmentTimeMin}-${this.seeApartmentTimeMax}`;
      this.showtime2 = false;
    },
    choosetime2() {
      this.showtime2 = false;
    },
    onclose1() {
      this.show1 = false;
    },
    onclose2() {
      this.show2 = false;
    },
    onclose3() {
      this.show3 = false;
    },
    onclose4() {
      this.show4 = false;
    },
    onConfirm1(value) {
      this.value1 = value;
      this.show1 = false;
      if (this.value2 == "请选择") {
        this.show2 = true;
      }
    },
    onCancel1() {
      this.show1 = false;
    },
    onConfirm2(value) {
      if (value == "低层1-7层") {
        this.sendval.floor = "1";
      } else if (value == "中层8-16层") {
        this.sendval.floor = "2";
      } else if (value == "高层17层及以上") {
        this.sendval.floor = "3";
      }
      this.value2 = value;
      this.show2 = false;
      if (this.value3 == "请选择") {
        this.show3 = true;
      }
    },
    onCancel2() {
      this.show2 = false;
    },
    onConfirm3(value) {
      if (value == "1室1厅1卫") {
        this.sendval.houseType = "1";
      } else if (value == "1室2厅1卫") {
        this.sendval.houseType = "2";
      } else if (value == "2室1厅1卫") {
        this.sendval.houseType = "3";
      } else if (value == "2室2厅1卫") {
        this.sendval.houseType = "4";
      } else if (value == "3室1厅1卫") {
        this.sendval.houseType = "5";
      } else if (value == "3室1厅2卫") {
        this.sendval.houseType = "6";
      } else if (value == "3室2厅1卫") {
        this.sendval.houseType = "7";
      } else if (value == "3室2厅2卫") {
        this.sendval.houseType = "8";
      } else if (value == "4室1厅1卫") {
        this.sendval.houseType = "9";
      } else if (value == "4室1厅2卫") {
        this.sendval.houseType = "10";
      } else if (value == "4室2厅1卫") {
        this.sendval.houseType = "11";
      } else if (value == "4室2厅2卫") {
        this.sendval.houseType = "12";
      }
      this.value3 = value;
      this.show3 = false;
      if (this.value4 == "请选择") {
        this.show4 = true;
      }
    },
    onCancel3() {
      this.show3 = false;
    },
    onConfirm4(value) {
      if (value == "有电梯") {
        this.sendval.hasElevator = "1";
      } else if (value == "无电梯") {
        this.sendval.hasElevator = "2";
      }
      this.value4 = value;
      this.show4 = false;
    },
    onCancel4() {
      this.show4 = false;
    },
    showScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 70) {
        this.$refs.header.style.backgroundColor = "#fff";
        this.$refs.header.style.color = "#333";
      } else {
        this.$refs.header.style.backgroundColor = "";
        this.$refs.header.style.color = "#fff";
      }
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirmdate(date) {
      this.showdate = false;
      this.sendval.decorateFinishTime = this.formatDate(date);
      this.valuedate = this.formatDate(date);
    },
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  beforeUpdate() {
    if (this.checked2) {
      this.$router.push({ path: "/buyentrust" });
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
};
</script>

<style scoped lang="less">
.moretip {
  width: 300px;
  height: 400px;
  overflow: scroll;
  padding: 0 15px;
  .tipwords {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin: 5px 0 15px;
  }
  .tipcard {
    span {
      display: inline-block;
      width: 70px;
      height: 30px;
      background-color: #f2f2f2;
      text-align: center;
      line-height: 30px;
      border-radius: 20px;
      margin-right: 6px;
      margin-bottom: 15px;
      font-size: 13px;
      color: #666;
      &:nth-child(4n) {
        margin-right: 0px;
      }
    }
    .active {
      background-color: #45b7cb;
      color: #fff;
    }
  }
  .btn {
    width: 100%;
    padding: 5px 15px 10px;
    border-top: 1px solid #f1f1f1;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    button {
      border: none;
      border-radius: 20px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      &:first-child {
        width: 40%;
        background-color: #fff;
        color: #999;
        border: 1px solid #999;
        margin-right: 10px;
      }
      &:last-child {
        width: 50%;
        background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
      }
    }
  }
}
.passreal {
  font-size: 13px;
  color: #45b7cb;
  margin: 0 15px 20px;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  color: #fff;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
    span {
      font-size: 12px;
      font-weight: normal;
    }
  }
}
.cutpart {
  height: 150px;
  width: 100%;
  color: #fff;
  background: url("../../assets/buysell01.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 80px 0 0;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  .num {
    margin: 0 5px;
    font-size: 24px;
  }
}
.houseinfo {
  .van-cell__value {
    color: #666;
  }
  .ask {
    margin-top: 5px;
  }
  input {
    width: 150px;
    text-align: right;
    border: none;
  }
  /deep/.pcell {
    display: flex;
    align-items: center;
    .van-cell__value {
      padding-right: 17px;
      color: #666;
    }
  }
  input {
    &::placeholder {
      color: #666;
    }
  }
  .cell {
    padding: 15px;
    font-size: 16px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    .telint {
      text-align: right;
      width: 100%;
      margin-right: 17px;
    }
    input {
      font-size: 15px;
    }
    .lbox {
      font-size: 16px;
      color: #323233;
      span {
        font-size: 12px;
        font-weight: normal;
        color: #999;
      }
    }
    .rbox {
      font-size: 15px;
      text-align: right;
      display: flex;
      color: #999;
      margin-right: 17px;
      span {
        color: #666;
      }
    }
  }
}
.picup {
  margin: 0 15px;
}
.tipsword {
  margin: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  span {
    font-size: 12px;
    font-weight: normal;
  }
}
.tipsword2 {
  margin: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
}
.card {
  margin: 15px;
  border: 1px solid #45b7cb;
  padding: 15px 15px 5px;
  background-image: linear-gradient(to bottom, #fff, #eafdff);
  > div {
    /deep/ &:first-child {
      margin-bottom: 15px;
      display: flex;
      font-size: 19px;
      font-weight: bold;
      color: #45b7cd;
      span {
        margin-left: 5px;
      }
    }
    &:nth-child(2),
    &:last-child {
      font-size: 15px;
      margin-bottom: 10px;
      img {
        width: 13px;
        margin-right: 6px;
      }
    }
  }
}
.showline {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 30px 0;
  > div {
    margin-bottom: 15px;
    width: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 20px;
      height: 20px;
    }
    span {
      width: 80px;
      font-size: 16px;
      color: #333;
    }
  }
}
.line {
  margin: 0 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #333;
  padding-bottom: 130px;
  .one {
    text-align: center;

    img {
      width: 50px;
      height: 50px;
    }
  }
  .two {
    padding-bottom: 20px;
    img {
      width: 30px;
      height: 7px;
    }
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  border-top: 2px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  .cheak {
    padding-bottom: 5px;
    height: 20px;
    display: flex;
    align-items: center;
    margin: 3px 15px;
    font-size: 11px;
    color: #333;
    > span {
      margin-left: 3px;
    }
    .xy {
      color: #45b7cb;
    }
  }
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 85%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.showpart {
  width: 300px;
  background-color: #fff;
  text-align: center;
  padding: 10px 0;

  > div {
    &:first-child {
      color: #45b7cb;
      font-size: 16px;
      margin: 20px 0;
      font-weight: bold;
    }

    &:nth-child(2) {
      font-size: 14px;
      margin: 0 15px 30px;
    }

    &:nth-child(3) {
      padding: 0 0 20px;
      font-size: 13px;
      color: #999;
      display: flex;
      justify-content: center;

      .sline {
        height: 10px;
        width: 35px;
        border-bottom: 1px solid #999;
        margin: 0 5px;
      }
    }
  }
}
.showpart2 {
  width: 300px;
  background-color: #fff;
  text-align: center;
  padding: 10px 0;

  > div {
    &:nth-child(1) {
      padding-top: 20px;
    }
    &:nth-child(1),
    &:nth-child(2) {
      font-size: 14px;
      margin: 0 15px;
    }

    &:nth-child(3) {
      padding: 20px 0 20px;
      font-size: 13px;
      color: #999;
      display: flex;
      justify-content: center;

      .sline {
        height: 10px;
        width: 35px;
        border-bottom: 1px solid #999;
        margin: 0 5px;
      }
    }
  }
}
</style>
